<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue demo</title>
    <script type="text/javascript" src="vue.js"></script>
  </head>
  <body>

    <h3>first use （ex. <code>new Vue</code>）</h3>
    <div id="app">
      {{ message }}
    </div>

    <h3>指令 （ex. <code>v-bind</code>）</h3>
    <div id="app-2">
      <span v-bind:title="message">
        Hover your mouse over me for a few seconds to see my dynamically bound title!
      </span>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        }
      });

      var app2 = new Vue({
        el: '#app-2',
        data: {
          message: 'You loaded this page on ' + new Date()
        }
      })
    </script>


    <div id="app-3">
    <p v-if="seen">Now you see me</p>
    </div>
    <script type="text/javascript">
      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      });
    </script>


    <div class="" id="app-4">
      <ol v-if=todos.length>
        <li v-for="todo in todos"> {{ todo.text}} </li>
      </ol>
    </div>
    <script type="text/javascript">
        var app4 = new Vue({
          el: '#app-4',
          data:{
            todos:[
              {text: (new Date()).getTime()},
              {text: (new Date()).getTime()},
              {text: (new Date()).getTime()},
              {text: (new Date()).getTime()}
            ]
          }
        });
    </script>


    <div class="app-5">
      <p>{{message}}</p>
      <button v-on:click="reverseMessage" name="button">Reverse Message</button>
    </div>
    <script type="text/javascript">
      var app5 = new Vue({
        el: '.app-5',
        data: function(){
          return { message: 'Hello Vue  hanah '}
        },
        methods:{
          reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
          }
        }

      });
    </script>


    <div class="app-6">
      <p>{{message}}</p>
      <input type="text" v-model="message" name="" value="">
    </div>
    <script type="text/javascript">
      var app6 = new Vue({
        el: '.app-6',
        data: {
          message: 'This is init value'
        }
      });
    </script>




    <script type="text/javascript">
      var data = { a: 1 }
      var vm = new Vue({
        //el: '#example',
        data: data,
        created: function () {
           // `this` 指向 vm 实例
           console.log('a is: ' + this.a)
       },
       mounted: function(){
         console.log('this Vue instance is mounted!!!!');
       }
      });
      vm.$data === data // -> true
      vm.$el === document.getElementById('example') // -> true
      // $watch 是一个实例方法
      vm.$watch('a', function (newVal, oldVal) {
        // 这个回调将在 `vm.a`  改变后调用
        console.log('old Value is : ' + oldVal)
        console.log('new Value is : ' + newVal)
      });

      // $mount 挂载方法
      var divObj = document.createElement('div');
          divObj.innerHTML = "{{a}}";
          divObj.id = 'example';
      document.body.appendChild(divObj);
      vm.$mount('#example');


    </script>


    <div class="template-1">
      <div>sdlfjdlkasfjdlsfjdlksfjd</div>
      {{a}}
    </div>
    <script type="text/javascript">
    // test template option

    var templat1 = new Vue({
      el: '.template-1',
      data: {
        a:'template data is me!!!!'
      },
      template: '<div> template is me :  {{a}}</div>'
    });

    </script>

    <h2>test git submodule</h2>
  </body>
</html>
